<template>
    <div class="lineCard">
        <div>
            <div class="yaxis">
                <div class="y_name">01</div>
                <div class="y_name">02</div>
                <div class="y_name">03</div>
                <div class="y_name">04</div>
                <div class="y_name">05</div>
            </div>
            <div :id="`line-${id}`" style="width:100%;height: 300px;"></div>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        return {
            option: {
                backgroundColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#011432' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#021A40' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                    padding: [8, 15],
                    // backgroundColor: 'rgba(12, 51, 115,0.8)',
                    borderColor: 'rgba(3, 11, 44, 0.5)',
                    textStyle: {
                        // color: 'rgba(255, 255, 255, 1)',
                        fontFamily: 'SourceHanSansCN-Normal',
                        fontSize: 16,
                    },
                },
                legend: {
                    show: false,
                },
                grid: {
                    left: '12%',
                    right: '5%',
                    top: '5%',
                    bottom: '2%',
                },
                xAxis: [
                    {
                        splitLine: {
                            show: false,
                        },
                        type: 'value',
                        show: false,
                        axisLine: {     //x轴坐标轴，false为隐藏，true为显示
                            show: false
                        },
                    },
                ],
                yAxis: [
                    {
                        show: true,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        inverse: true,
                        data: [1, 2, 3, 4, 5, 6, 7, 8],

                        axisLabel: {
                            show: false,
                            textStyle: {
                                color: 'rgba(255, 255, 255, 1)',
                                fontFamily: 'SourceHanSansCN-Normal',
                                fontSize: 22,
                            },
                            formatter: function (params) {
                                return ['{b|0' + params + '}'].join('\n');
                            },
                            rich: {
                                b: {
                                    color: "rgba(203, 218, 255, 1)",
                                    width: 28,
                                    height: 28,
                                    padding: [2, 0, 0, 0],
                                    borderRadius: 2,
                                    fontSize: 16,
                                    align: 'center',
                                    fontWeight: 500,
                                },
                            },
                        },

                    },
                    {
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        position: "right",
                        axisLabel: {
                            inside: true,
                            verticalAlign: 'bottom',
                            lineHeight: 34,
                            margin: 0,       //刻度标签与轴线之间的距离
                            show: true,
                            textStyle: {
                                color: 'rgba(255, 255, 255, 1)',
                                fontFamily: 'DINAlternate-Bold',
                                fontSize: 18,
                            },
                            formatter: function (value) {
                                return value;
                            },
                        },
                        // 右上角数字
                        data: this.optData,
                    },
                ],
                series: [
                    {
                        show: true,
                        name: '',
                        type: 'bar',
                        data: this.optData,
                        barWidth: 8, // 柱子宽度
                        showBackground: true,
                        backgroundStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#283451",
                                    },
                                ],
                            }
                        },
                        label: {
                            show: true,
                            offset: [5, -15],
                            color: 'rgba(255, 255, 255, 1)',
                            fontFamily: 'SourceHanSansCN-Normal',
                            fontSize: 15,
                            fontWeight: 500,
                            position: 'left',
                            align: 'left',
                            formatter: function (params) {
                                return params.data.name;
                            }
                        },
                        itemStyle: {
                            barBorderRadius: 10,
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(38,62,120, 1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(32,143,250, 1)",
                                    },
                                ],
                            }
                        }
                    },
                    {
                        name: "",
                        type: "scatter",
                        emphasis: {
                            scale: false,
                        },
                        symbol: "circle",
                        symbolSize: [15, 15],// 进度条白点
                        itemStyle: {
                            show: true,
                            barBorderRadius: 50,
                            borderRadius: 10,
                            borderColor: "#FFF",
                            color: '#1F5AFF',
                            shadowColor: "rgba(255, 255, 255, 0.5)",
                            shadowBlur: 5,
                            borderWidth: 1,
                            opacity: 1,
                        },
                        z: 2,
                        data: this.optData,
                        animationDelay: 500,
                    },
                ],
                dataZoom: [
                    {
                        yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
                        show: false, // 是否显示滑动条，不影响使用
                        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                        startValue: 0, // 从头开始。
                        endValue: 4 // 展示到第几个。
                    }
                ]
            },
        }
    },
    props: {
        id: {
            type: String,
            required: true
        },
        optData: {
            type: Array,
            required: true
        },
        height: {
            type: Number,
            require: true,
        },
        valNumber: {
            type: Array,
            require: true,
        }
    },
    methods: {
        fnDrawPie() {
            let charts001 = this.$echarts.init(document.getElementById(`line-${this.id}`));
            charts001.setOption(this.option)
        },
    },
    mounted() {
        this.fnDrawPie()
    },
    watch: {
        optData(newVal, oldVal) {
            if (newVal) {
                this.option.data = newVal;
            }
        }
    }
}

</script>
<style lang="less" scoped>
.lineCard {
    width: 100%;
    height: 100%;
    position: relative;

    .yaxis{
        position: absolute;
        z-index: 2;
        left: 20px;
        top: 10px;
        .y_name{
            background-image: url(../image/bg_number.png);
            background-repeat: round;
            font-size: 16px;
            padding: 10px;
            color: #fff;
            margin-bottom: 14px;
        }
    }
}
</style>